<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Confirmation Email</title>
    <style>
      body {
        font-family: "Arial", sans-serif;
        background-color: #f7f7f7;
        margin: 0;
        padding: 0;
      }

      .container {
        max-width: 600px;
        margin: 50px auto;
        background-color: #fff;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      h1,
      h2 {
        color: #007bff;
      }

      p {
        color: #333;
        line-height: 1.6;
      }

      .highlight {
        font-weight: bold;
      }

      .footer {
        margin-top: 30px;
        text-align: left;
        color: #666;
      }
      .container {
        max-width: 600px;
        margin: 50px auto;
        background-color: #fff;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      h1,
      h2 {
        color: #007bff;
      }

      p {
        color: #333;
        line-height: 1.6;
      }

      .highlight {
        font-weight: bold;
      }

      .footer {
        margin-top: 30px;
        text-align: left;
        color: #666;
      }
      table {
        border-collapse: collapse;
        border-spacing: 0;
      }

      td,
      th {
        padding: 0;
      }

      .pure-table {
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #cbcbcb;
      }

      .pure-table caption {
        color: #000;
        font: italic 85%/1 arial, sans-serif;
        padding: 1em 0;
        text-align: center;
      }

      .pure-table td,
      .pure-table th {
        border-left: 1px solid #cbcbcb;
        border-width: 0 0 0 1px;
        font-size: inherit;
        margin: 0;
        overflow: visible;
        padding: 0.5em 1em;
      }

      .pure-table thead {
        background-color: #e0e0e0;
        color: #000;
        text-align: left;
        vertical-align: bottom;
      }

      .pure-table td {
        background-color: transparent;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Dear GMPS user,</h2>
      <p>
        This email is to confirm that you have submitted an alignment target to
        our server.
      </p>
      <p>
        The result will be delivered to this email address after completion.
      </p>
      <h3>The url to check the status of the task:</h3>
      <a href="{{job_url}}">{{ job_url }}</a>
      <h3>Running Parameters:</h3>
      <p><span class="highlight">JOB ID:</span> {{ job_id }}</p>
      <table class="pure-table">
        <thead>
          <tr>
            <th>PDB file</th>
            <th>CHAIN</th>
          </tr>
        </thead>
        <tbody>
          {% for item in data %}
          <tr>
            <td>{{ item.file_name }}</td>
            <td>{{ item.chain }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      <p>Thank you for using this web service.</p>
      <!-- <p class="footer">Best regards,<br />GMPS Team</p> -->
    </div>
  </body>
</html>
